<template>
    <li>
        <!-- 表达式是true则渲染，是false则不渲染 -->
        <!-- <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)" /> -->
        <!-- 第2种写法 -->
        <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
        <span>{{todo.title}}</span>
        <button @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
    export default {
        name : "MyItem",
        // 声明接受todo对象
        props:['todo',"updateCheckTodo","deleteTodo"],
        methods:{
            handleCheck(id){
                this.updateCheckTodo(id)
            },
            handleDelete(id){
                this.deleteTodo(id)
            }
        },
    }
</script>

<style scoped>

</style>
